<template>
	<uni-popup ref="popup" :safe-area="false" type="bottom" class="picker-box" @maskClick="close" @change="change">
		<view class="picker-head flex-r">
			<text @tap="toggle(false)">取消</text>
			<text class="text-bold">{{title}}</text>
			<text class="color-blue" @tap="confirm">确定</text>
		</view>
		<picker-view class="picker-view" indicator-class="indicator" :value="tempIndex" @change="bindChange">
			<picker-view-column>
				<view class="picker-item flex-r" v-for="(item,index) in data" :key="index">
					<text>{{item.title}}</text>
				</view>
			</picker-view-column>
		</picker-view>
		<view class="bottom-ios"></view>
	</uni-popup>
</template>

<script>
	/**
	 * PickerPopup 底部弹框选择器
	 * @description 发布方案时底部弹出的选择器
	 * @property {String} type = [sport|lottery|play] 需要选择的数据类型
	 *  @value sport - 比赛类型
	 *  @value lottery - 竞彩类型
	 *  @value play - 玩法类型
	 * @property {String} title 弹框标题
	 * @property {Array} data 数据源列表
	 * @property {Number} select 已选择数据索引
	 * @event {Function} change 选择完成回调
	 * @event {Function} close 关闭弹框回调
	 * @example <PickerPopup type="sport" :data="data" title="比赛类型"></PickerPopup>
	 */
	export default {
		name:"PickerPopup",
		emits: ['change', 'close'],
		props: {
			type: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			data: {
				type: Array,
				default: () => {
					return []
				}
			},
			select: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tempIndex: [0]
			};
		},
		watch: {
			select(newValue){
				this.tempIndex = [newValue]
			}
		},
		mounted() {
			this.tempIndex = [this.select]
			this.toggle(true)
		},
		methods: {
			/**
			 * @description 开关弹框
			 * @param {boolean} status 弹框开关状态
			 */
			toggle(status){
				if(status){
					this.$refs.popup.open()
				}else{
					this.$refs.popup.close()
					this.close()
				}
			},
			/**
			 * @description 选择变动回调
			 * @param {object} event 选择器回调对象
			 */
			bindChange(event) {
				this.tempIndex = event.detail.value
			},
			/**
			 * @description 确认选择
			 */
			confirm() {
				console.log(this.tempIndex);
				this.$emit('change', {
					index: this.tempIndex[0], 
					type: this.type
				})
				this.toggle(false)
			},
			/**
			 * @description 关闭弹框
			 */
			close(){
				this.$emit('close')
			},
			/**
			 * @description 触发关闭回调
			 * @param {object} event 回调对象
			 */
			change(event){
				if(!event.show){
					this.close()
				}
			}
		}
	}
</script>

<style lang="scss">
	.picker-box{
		/deep/ .bottom{
			max-width: $max-width;
			margin: $pc-margin;
		}
		.picker-head{
			height: 96rpx;
			align-items: center;
			background-color: #FFFFFF;
			border-radius: 30rpx 30rpx 0 0;
			padding: 0 30rpx;
			text{
				font-size: 32rpx;
				line-height: 32rpx;
			}
			.text-bold{
				flex: 2;
				text-align: center;
				font-size: 36rpx;
				line-height: 36rpx;
			}
		}
		.picker-view {
			height: 320rpx;
			background-color: #FFFFFF;
			border-top: 1px solid #EDEDED;
			.picker-item {
				height: 96rpx;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333333;
			}
			/deep/ .indicator{
				height: 96rpx;
				background-color: #F5F5F5;
				z-index: 1;
			}
			/deep/ .uni-picker-view-indicator:before{
				border: none;
			}
			/deep/ .uni-picker-view-indicator:after{
				display: none;
			}
			/deep/ .uni-picker-view-content{
				z-index: 2;
			}
		}
		.bottom-ios{
			background-color: #fff;
		}
	}
</style>